<template>
  <div class="main-layout-content">
    <a-row style="padding-bottom: 10px">
      <a-space :size="20">
        <a-button type="primary" @click="visible = true">
          <a-icon type="download" />导出表格
        </a-button>
        <a-button type="danger" @click="visible = true">
          <a-icon type="delete" />删除
        </a-button>
      </a-space>
    </a-row>
    <div>
      <a-table
        bordered
        :row-selection="rowSelection"
        :rowKey="record => record.id"
        :columns="table.columns"
        :dataSource="table.data"
        :pagination="table.pagination"
        :loading="table.loading"
        @change="onPageChange"
      ></a-table>
    </div>
  </div>
</template>
<script>
import { clientManagementApi } from "../../api/clientManagement";
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      "selectedRows: ",
      selectedRows
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  }
};
export default {
  data() {
    return {
      rowSelection,
      table: {
        loading: true,
        data: [],
        columns: [
          {
            title: "客户单位",
            dataIndex: "company",
            align: "center"
          }
        ],
        pagination: { total: 0, current: 1, pageSize: 10 }
      },
      model: null,
      visible: false,
    };
  },
  
  mounted() {
    this.loadModel(0, 10);
  },
  methods: {
    loadModel(page, size) {
      let data = {
        "@connection": "account",
        "[]": {
          "@page": page,
          "@size": size,
          feedback: {
            "@order": "createAt-",
            processStatus: "已提交"
          }
        }
      };
      clientManagementApi.load(data, o => {
        console.log(o);
        this.table.data = o["[]"];
        this.table.loading = false;
      });
    },
    onPageChange(e) {
      this.loadModel("all", e.current - 1, e.pageSize);
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    }
  }
};
</script>
<style>
.para-model-row {
  display: flex;
  flex-direction: row;
}

.para-model-row p {
  width: 130px;
  line-height: 28px;
}

/* .app-modal{
        right: 10px;
    } */
</style>
